---
import Section from "./Section.astro";
//@ts-ignore
import fs from "node:fs/promises";

const url = new URL("../../public/logo.txt", import.meta.url);
const data = await fs.readFile(url, "utf8");
---

<Section>
  <div class="flex justify-between">
    <div>
      <pre class="" style="font-size: max(0.5vw, 0.25rem);">{data}</pre>
    </div>
    <div>
      <!-- Light/Dark Mode Switch -->
      <div class="ml-3 flex flex-col justify-center">
        <input type="checkbox" id="light-switch" class="light-switch sr-only" />
        <label class="tada relative cursor-pointer p-2" for="light-switch">
          <svg
            class="dark:hidden"
            width="16"
            height="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              class="fill-stone-800"
              d="M7 0h2v2H7zM12.88 1.637l1.414 1.415-1.415 1.413-1.413-1.414zM14 7h2v2h-2zM12.95 14.433l-1.414-1.413 1.413-1.415 1.415 1.414zM7 14h2v2H7zM2.98 14.364l-1.413-1.415 1.414-1.414 1.414 1.415zM0 7h2v2H0zM3.05 1.706 4.463 3.12 3.05 4.535 1.636 3.12z"
            ></path>
            <path
              class="fill-gray-900"
              d="M8 4C5.8 4 4 5.8 4 8s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4Z"></path>
          </svg>
          <svg
            class="hidden dark:block"
            width="16"
            height="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              class="fill-slate-400"
              d="M6.2 1C3.2 1.8 1 4.6 1 7.9 1 11.8 4.2 15 8.1 15c3.3 0 6-2.2 6.9-5.2C9.7 11.2 4.8 6.3 6.2 1Z"
            ></path>
            <path
              class="fill-slate-500"
              d="M12.5 5a.625.625 0 0 1-.625-.625 1.252 1.252 0 0 0-1.25-1.25.625.625 0 1 1 0-1.25 1.252 1.252 0 0 0 1.25-1.25.625.625 0 1 1 1.25 0c.001.69.56 1.249 1.25 1.25a.625.625 0 1 1 0 1.25c-.69.001-1.249.56-1.25 1.25A.625.625 0 0 1 12.5 5Z"
            ></path>
          </svg>
          <span class="sr-only">Switch to light / dark version</span>
        </label>
      </div>
    </div>
  </div>
</Section>

<script>
  function setDarkMode(isDarkMode: boolean) {
    localStorage.setItem("dark-mode", isDarkMode.toString());
    document.documentElement.classList.toggle("dark", isDarkMode);
    const elements = [
      document.getElementById("myGrid"),
      document.getElementById("myFooter"),
    ];
    elements.forEach((el) => {
      el.classList.toggle("ag-theme-quartz-dark", isDarkMode);
      el.classList.toggle("ag-theme-quartz", !isDarkMode);
    });
  }
  const lightSwitches = document.querySelectorAll(".light-switch");
  if (lightSwitches.length > 0) {
    lightSwitches.forEach((lightSwitch: any, i) => {
      if (localStorage.getItem("dark-mode") === "true") {
        lightSwitch.checked = true;
      }
      lightSwitch.addEventListener("click", () => {
        const { checked } = lightSwitch;
        lightSwitches.forEach((el: any, n) => {
          if (n !== i) {
            el.checked = checked;
          }
        });
        setDarkMode(checked);
      });
    });
  }
</script>
